
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>evak</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./css/static.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
<div class="title_title">
    <div class="title">
        <p class="navbar-text">evak首页</p>
        <div class="title_input">
            <a data-toggle="modal" data-target="#login"  href="javascript:;">登录</a>
            <a data-toggle="modal" data-target="#register"  href="javascript:;">注册</a>
            <div class="input-group">
                <div class="title_input_search">
                    <input type="text" class="form-control" placeholder="Search for...">
                </div>
                <span class="glyphicon glyphicon-search ipt_icon"></span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row title_bottom">
        <ul class="nav nav-tabs col-lg-12 title_bottom_ul">
            <li role="presentation" id="content_main" class="active"><a href="#">主页</a></li>
            <li role="presentation" id="content_message"><a href="#">留言区</a></li>
            <li role="presentation" id="content_article"><a href="#">文章</a></li>
        </ul>
    </div>
</div>

    <div class="content">
        <div class="content_main">
            <ul class="images_list">
                <li class="images_list0"><img src="./assets/images/u=1375103520,744240712&fm=58&s=63710B66A64A2CF4566D3D0F0000E0C1.jpg" alt=""><span>毒液：致命守护者</span></li>
                <li class="images_list1"><img src="./assets/images/u=1541627657,2068339724&fm=58&s=DB04468C58026EDAD0AC2CA00300E092.jpg" alt=""><span>蜘蛛侠</span></li>
                <li class="images_list2"><img src="./assets/images/u=1616366067,2036536770&fm=58&s=C2D6588260E213B5252895B70300A001.jpg" alt=""><span>死侍</span></li>
                <li class="images_list3"><img src="./assets/images/u=1686583698,1592906599&fm=58&s=89C549868452A1FD1B3991A303003095.jpg" alt=""><span>美国队长3</span></li>
                <li class="images_list4"><img src="./assets/images/u=3736708205,3624361310&fm=58&s=55C5C2A6CA3288DC14729EAB0300E007.jpg" alt=""><span>复仇者联盟3</span></li>
            </ul>
            <div class="content_detail0">
                <div class="movie_top">
                    <h2>
                        毒液：致命守护者
                    </h2>
                    <div class="movie_content">
                        <div class="movie_top_left">
                            <img src="./assets/images/u=1375103520,744240712&fm=58&s=63710B66A64A2CF4566D3D0F0000E0C1.jpg" alt="">
                            <ul class="movie_top_left_list">
                                <li>
                                    <span>导演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>编剧：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>主演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>类型：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>片长：</span>
                                    <span>XXX</span>
                                </li>
                            </ul>
                        </div>
                        <div class="movie_top_right">
                            <div>豆瓣评分</div>
                            <div class="movie_top_pingfen">
                                <div>7.4</div>
                                <div>★★★★☆</div>
                            </div>
                            <div>
                                <ul class="progress_list">
                                    <li><span>五星：</span><span class="progress item_5"></span><span>%</span></li>
                                    <li><span>四星：</span><span class="progress item_4"></span><span>%</span></li>
                                    <li><span>三星：</span><span class="progress item_3"></span><span>%</span></li>
                                    <li><span>二星：</span><span class="progress item_2"></span><span>%</span></li>
                                    <li><span>一星：</span><span class="progress item_1"></span><span>%</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="movie_middle">
                    <div class="movie_middle_first">
                        <!-- Indicates a dangerous or potentially negative action -->
                        <button type="button" class="btn btn-danger">想看</button>

                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                        <button type="button" class="btn btn-info">看过</button>
                        <span>评价：☆☆☆☆☆</span>
                    </div>
                    <div  class="movie_middle_second">
                        <span><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;写短评</span>
                        <span><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;写影评</span>
                        <span><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;提问题</span>
                        <span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>&nbsp;分享到</span>
                    </div>
                </div>
                <div class="movie_bottom">
                    <h3 class="movie_bottom_title">毒液：致命守护者的剧情简介······</h3>
                    <p class="movie_bottom_content">影片改编自漫威漫画，讲述了埃迪·布洛克受到不明外星物质共生体的入侵与控制，成为亦正亦邪的另类超级英雄的故事。</p>
                </div>
            </div>
            <div class="content_detail1">
                <div class="movie_top">
                    <h2>
                     蜘蛛侠   
                    </h2>
                    <div class="movie_content">
                        <div class="movie_top_left">
                            <img src="./assets/images/u=1541627657,2068339724&fm=58&s=DB04468C58026EDAD0AC2CA00300E092.jpg" alt="">
                            <ul class="movie_top_left_list">
                                <li>
                                    <span>导演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>编剧：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>主演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>类型：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>片长：</span>
                                    <span>XXX</span>
                                </li>
                            </ul>
                        </div>
                        <div class="movie_top_right">
                            <div>豆瓣评分</div>
                            <div class="movie_top_pingfen">
                                <div>7.3</div>
                                <div>★★★★☆</div>
                            </div>
                            <div>
                                <ul class="progress_list">
                                    <li><span>五星：</span><span class="progress item_5"></span><span>%</span></li>
                                    <li><span>四星：</span><span class="progress item_4"></span><span>%</span></li>
                                    <li><span>三星：</span><span class="progress item_3"></span><span>%</span></li>
                                    <li><span>二星：</span><span class="progress item_2"></span><span>%</span></li>
                                    <li><span>一星：</span><span class="progress item_1"></span><span>%</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="movie_middle">
                    <div class="movie_middle_first">
                        <!-- Indicates a dangerous or potentially negative action -->
                        <button type="button" class="btn btn-danger">想看</button>

                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                        <button type="button" class="btn btn-info">看过</button>
                        <span>评价：☆☆☆☆☆</span>
                    </div>
                    <div  class="movie_middle_second">
                        <span><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;写短评</span>
                        <span><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;写影评</span>
                        <span><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;提问题</span>
                        <span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>&nbsp;分享到</span>
                    </div>
                </div>
                <div class="movie_bottom">
                    <h3 class="movie_bottom_title">蜘蛛侠的剧情简介······</h3>
                    <p class="movie_bottom_content">讲述了彼得·帕克在超级英雄身份与高中生活之间面临的抉择。</p>
                </div>
            </div>
            <div class="content_detail2">
                <div class="movie_top">
                    <h2>
                        死侍
                    </h2>
                    <div class="movie_content">
                        <div class="movie_top_left">
                            <img src="./assets/images/u=1616366067,2036536770&fm=58&s=C2D6588260E213B5252895B70300A001.jpg" alt="">
                            <ul class="movie_top_left_list">
                                <li>
                                    <span>导演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>编剧：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>主演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>类型：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>片长：</span>
                                    <span>XXX</span>
                                </li>
                            </ul>
                        </div>
                        <div class="movie_top_right">
                            <div>豆瓣评分</div>
                            <div class="movie_top_pingfen">
                                <div>7.5</div>
                                <div>★★★★☆</div>
                            </div>
                            <div>
                                <ul class="progress_list">
                                    <li><span>五星：</span><span class="progress item_5"></span><span>%</span></li>
                                    <li><span>四星：</span><span class="progress item_4"></span><span>%</span></li>
                                    <li><span>三星：</span><span class="progress item_3"></span><span>%</span></li>
                                    <li><span>二星：</span><span class="progress item_2"></span><span>%</span></li>
                                    <li><span>一星：</span><span class="progress item_1"></span><span>%</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="movie_middle">
                    <div class="movie_middle_first">
                        <!-- Indicates a dangerous or potentially negative action -->
                        <button type="button" class="btn btn-danger">想看</button>

                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                        <button type="button" class="btn btn-info">看过</button>
                        <span>评价：☆☆☆☆☆</span>
                    </div>
                    <div  class="movie_middle_second">
                        <span><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;写短评</span>
                        <span><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;写影评</span>
                        <span><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;提问题</span>
                        <span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>&nbsp;分享到</span>
                    </div>
                </div>
                <div class="movie_bottom">
                    <h3 class="movie_bottom_title">死侍的剧情简介······</h3>
                    <p class="movie_bottom_content">讲述了前任特种兵韦德·威尔逊得了癌症，为了治疗被不知名的组织绑架，用来测试变种人基因。在饱受虐待折磨后他成功逃脱并对把他变成变种人的阿贾克斯进行报复的故事。</p>
                </div>
            </div>
            <div class="content_detail3">
                <div class="movie_top">
                    <h2>
                       美国队长3
                    </h2>
                    <div class="movie_content">
                        <div class="movie_top_left">
                            <img src="./assets/images/u=1686583698,1592906599&fm=58&s=89C549868452A1FD1B3991A303003095.jpg" alt="">
                            <ul class="movie_top_left_list">
                                <li>
                                    <span>导演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>编剧：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>主演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>类型：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>片长：</span>
                                    <span>XXX</span>
                                </li>
                            </ul>
                        </div>
                        <div class="movie_top_right">
                            <div>豆瓣评分</div>
                            <div class="movie_top_pingfen">
                                <div>7.7</div>
                                <div>★★★★☆</div>
                            </div>
                            <div>
                                <ul class="progress_list">
                                    <li><span>五星：</span><span class="progress item_5"></span><span>%</span></li>
                                    <li><span>四星：</span><span class="progress item_4"></span><span>%</span></li>
                                    <li><span>三星：</span><span class="progress item_3"></span><span>%</span></li>
                                    <li><span>二星：</span><span class="progress item_2"></span><span>%</span></li>
                                    <li><span>一星：</span><span class="progress item_1"></span><span>%</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="movie_middle">
                    <div class="movie_middle_first">
                        <!-- Indicates a dangerous or potentially negative action -->
                        <button type="button" class="btn btn-danger">想看</button>

                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                        <button type="button" class="btn btn-info">看过</button>
                        <span>评价：☆☆☆☆☆</span>
                    </div>
                    <div  class="movie_middle_second">
                        <span><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;写短评</span>
                        <span><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;写影评</span>
                        <span><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;提问题</span>
                        <span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>&nbsp;分享到</span>
                    </div>
                </div>
                <div class="movie_bottom">
                    <h3 class="movie_bottom_title">美国队长3的剧情简介······</h3>
                    <p class="movie_bottom_content">讲述了奥创事件后引发的一系列政治问题导致复仇者之间内部矛盾激化的故事。</p>
                </div>
            </div>
            <div class="content_detail4">
                <div class="movie_top">
                    <h2>
                        复仇者联盟3
                    </h2>
                    <div class="movie_content">
                        <div class="movie_top_left">
                            <img src="./assets/images/u=3736708205,3624361310&fm=58&s=55C5C2A6CA3288DC14729EAB0300E007.jpg" alt="">
                            <ul class="movie_top_left_list">
                                <li>
                                    <span>导演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>编剧：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>主演：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>类型：</span>
                                    <span>XXX</span>
                                </li>
                                <li>
                                    <span>片长：</span>
                                    <span>XXX</span>
                                </li>
                            </ul>
                        </div>
                        <div class="movie_top_right">
                            <div>豆瓣评分</div>
                            <div class="movie_top_pingfen">
                                <div>8.5</div>
                                <div>★★★★☆</div>
                            </div>
                            <div>
                                <ul class="progress_list">
                                    <li><span>五星：</span><span class="progress item_5"></span><span>%</span></li>
                                    <li><span>四星：</span><span class="progress item_4"></span><span>%</span></li>
                                    <li><span>三星：</span><span class="progress item_3"></span><span>%</span></li>
                                    <li><span>二星：</span><span class="progress item_2"></span><span>%</span></li>
                                    <li><span>一星：</span><span class="progress item_1"></span><span>%</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="movie_middle">
                    <div class="movie_middle_first">
                        <!-- Indicates a dangerous or potentially negative action -->
                        <button type="button" class="btn btn-danger">想看</button>

                        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                        <button type="button" class="btn btn-info">看过</button>
                        <span>评价：☆☆☆☆☆</span>
                    </div>
                    <div  class="movie_middle_second">
                        <span><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;写短评</span>
                        <span><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp;写影评</span>
                        <span><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;提问题</span>
                        <span><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>&nbsp;分享到</span>
                    </div>
                </div>
                <div class="movie_bottom">
                    <h3 class="movie_bottom_title">复仇者联盟3的剧情简介······</h3>
                    <p class="movie_bottom_content">讲述了复仇者联盟和他们的超级英雄盟友们牺牲一切，阻止灭霸毁灭一半宇宙的故事。</p>
                </div>
            </div>
        </div>
        <div class="content_message">
            <div class="comment">
                <div class="commit_textarea">
                    <div class="commit_text_title">
                        <span>
                            发表评论
                        </span>
                        <span>
                            6条评论
                        </span>
                    </div>
                    <div>
                        <textarea name="" id="textarea00" cols="30" rows="10" placeholder="在此输入评价···"></textarea>
                    </div>
                </div>
                <div class="commit_content">
                    <span><input type="checkbox" aria-label="...">&nbsp;&nbsp;匿名&nbsp;&nbsp;&nbsp;</span>
                    <button type="button" class="btn btn-info">发布</button>
                </div>
                <div class="commit_list">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="list_item">
                                <div>用户：张三</div>
                                <div>这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。</div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="list_item">
                                <div>用户：李四</div>
                                <div>进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。</div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="list_item">
                                <div>用户：王麻子</div>
                                <div>通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。</div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="list_item">
                                <div>用户：罗六</div>
                                <div>给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。</div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="list_item">
                                <div>用户：鬼脚七</div>
                                <div>用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content_recreation">
            content_recreation
        </div>
        <div class="content_article">
            content_article
        </div>
    </div>
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input class="form-control" type="text" placeholder="6-15位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">密码</label>
                        <input class="form-control" type="password" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">再次输入密码</label>
                        <input class="form-control" type="password" placeholder="至少6位字母或数字">
                    </div>
                    <div class="form-group">
                        <label for="">邮箱</label>
                        <input class="form-control" type="email" placeholder="例如:111@111.com">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 登录窗口 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">登录</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" action="">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input class="form-control" type="text" placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="">密码</label>
                        <input class="form-control" type="password" placeholder="">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">登录</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>